<template>
  <th
    scope="col"
    :class="[
      'relative whitespace-nowrap',
      thClass,
      {
        'table-primary-column': isPrimary,
        'table-actions-column': attribute === 'actions',
        'text-left': isLeftAligned,
        'text-center': isCentered,
      },
    ]"
    :style="{
      width: width,
      'min-width': minWidth,
    }"
  >
    <div
      v-if="attribute === 'actions'"
      v-once
      class="absolute -left-px top-0 h-full w-px bg-neutral-200 dark:bg-neutral-800/40"
    />

    <div
      v-else-if="isPrimary"
      v-once
      style="box-shadow: 0 1px 15px rgba(0, 0, 0, 0.25)"
      class="absolute -right-px top-0 h-full w-px bg-neutral-200 dark:bg-neutral-800/40"
    />

    <div
      v-if="isSelectable"
      :class="{
        'left-12': !condensed,
        'left-8': condensed,
      }"
      class="absolute top-0 h-full w-px bg-neutral-200 dark:bg-neutral-800"
    />

    <div class="flex items-center">
      <IFormCheckbox
        v-if="isSelectable"
        :class="{ '-ml-2': !condensed }"
        :checked="allRowsSelected"
        @change="$emit('toggle-select-all')"
      />

      <div
        :class="[
          'grow',
          {
            'ml-6': isSelectable && !condensed,
            'ml-2': isSelectable && condensed,
          },
        ]"
      >
        <a
          v-if="isSortable"
          class="group inline-flex hover:text-neutral-700 focus:outline-none dark:hover:text-neutral-400"
          href="#"
          @click.prevent="$emit('sort-requested', attribute)"
        >
          <slot>
            {{ label }}
          </slot>

          <span
            v-show="isOrdered"
            class="ml-2 flex-none rounded bg-neutral-200 text-sm text-neutral-900 group-hover:bg-neutral-300"
          >
            <Icon
              :icon="isSortedAscending ? 'ChevronUp' : 'ChevronDown'"
              class="h-4 w-4"
            />
          </span>

          <span
            v-show="!isOrdered"
            class="invisible ml-2 flex-none rounded text-neutral-400 group-hover:visible group-focus:visible"
          >
            <Icon
              v-once
              icon="ChevronDown"
              class="invisible h-4 w-4 flex-none rounded text-neutral-400 group-hover:visible group-focus:visible"
            />
          </span>
        </a>

        <span v-else>
          <slot>
            {{ label }}
          </slot>
        </span>
      </div>
    </div>
  </th>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // Whether the current column is ordered
  isOrdered: Boolean,
  attribute: { type: String, required: true },
  thClass: { required: true },
  width: { required: true },
  minWidth: { required: true },
  label: { required: true },
  condensed: Boolean,
  isSortedAscending: Boolean,
  isPrimary: Boolean,
  isSelectable: Boolean,
  isSortable: Boolean,
  isCentered: Boolean,
  allRowsSelected: Boolean,
})

defineEmits(['toggle-select-all', 'sort-requested'])

const isLeftAligned = computed(
  () =>
    !props.thClass ||
    !['text-center', 'text-left', 'text-right'].some(alignmentClass =>
      props.thClass.includes(alignmentClass)
    )
)
</script>
